<!DOCTYPE html>
<html>
  <head>
    <title>jQCloud Example</title>
    <style type="text/css">
      div.jqcloud span.vertical {
        -webkit-writing-mode: vertical-rl;
        writing-mode: tb-rl;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="../jqcloud/jqcloud.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    <script type="text/javascript" src="../jqcloud/jqcloud-1.0.4.js"></script>
    <script type="text/javascript">
      var word_list = [
        {text: "Lorem", weight: 13},
        {text: "Ipsum", weight: 10.5, html: {"class": "vertical"}},
        {text: "Dolor", weight: 9.4},
        {text: "Sit", weight: 8, html: {"class": "vertical"}},
        {text: "Amet", weight: 6.2},
        {text: "Consectetur", weight: 5},
        {text: "Adipiscing", weight: 5, html: {"class": "vertical"}},
        {text: "Elit", weight: 5},
        {text: "Nam et", weight: 5},
        {text: "Leo", weight: 4, html: {"class": "vertical"}},
        {text: "Sapien", weight: 4},
        {text: "Pellentesque", weight: 3},
        {text: "habitant", weight: 3, html: {"class": "vertical"}},
        {text: "morbi", weight: 3},
        {text: "tristisque", weight: 3, html: {"class": "vertical"}},
        {text: "senectus", weight: 3},
        {text: "et netus", weight: 3},
        {text: "et malesuada", weight: 3, html: {"class": "vertical"}},
        {text: "fames", weight: 2},
        {text: "ac turpis", weight: 2},
        {text: "egestas", weight: 2},
        {text: "Aenean", weight: 2, html: {"class": "vertical"}},
        {text: "vestibulum", weight: 2},
        {text: "elit", weight: 2},
        {text: "sit amet", weight: 2, html: {"class": "vertical"}},
        {text: "metus", weight: 2},
        {text: "adipiscing", weight: 2, html: {"class": "vertical"}},
        {text: "ut ultrices", weight: 2},
        {text: "justo", weight: 1},
        {text: "dictum", weight: 1, html: {"class": "vertical"}},
        {text: "Ut et leo", weight: 1},
        {text: "metus", weight: 1},
        {text: "at molestie", weight: 1},
        {text: "purus", weight: 1, html: {"class": "vertical"}},
        {text: "Curabitur", weight: 1},
        {text: "diam", weight: 1, html: {"class": "vertical"}},
        {text: "dui", weight: 1},
        {text: "ullamcorper", weight: 1},
        {text: "id vuluptate ut", weight: 1, html: {"class": "vertical"}},
        {text: "mattis", weight: 1},
        {text: "et nulla", weight: 1},
        {text: "Sed", weight: 1}
      ];
      $(function() {
        $("#my_favorite_latin_words").jQCloud(word_list);
      });
    </script>
  </head>
  <body>
    <h1>jQCloud Example</h1>
    <p>In this example, about a third of the words will be rendered vertically in browsers that support CSS3 writing-mode property (IE and WebKit as of August 2011 to my knowledge).</p>
    <div id="my_favorite_latin_words" style="width: 500px; height: 450px; border: 1px solid #ccc;"></div>
  </body>
</html>
